<script setup>
import { ref, onMounted } from 'vue'
import { getAllPosApi, noPassReviewApi, getPosByIdApi } from '../../api/admin'
import {  ElMessage, ElMessageBox } from 'element-plus'

onMounted(() => {
  onSubmit()
})
//查询条件
const formInline = ref({ title: '', positionType: '', publishDate: '', })
//清空查询条件
const clear = () => {
  formInline.value = { title: '', positionType: '', publishDate: '', }
  currentPage.value = 1
  pageSize.value = 10
  onSubmit()
}
// 条件查询
const onSubmit = async () => {
  // 判断时间是否为null
  if(!formInline.value.publishDate){
    formInline.value.publishDate = ''
  }
  //  去除字符串首尾空格
  if(!formInline.value.title){
    formInline.value.title = formInline.value.title.trim()
  }
  const result = await getAllPosApi(formInline.value.title, formInline.value.positionType, 
    formInline.value.publishDate, currentPage.value, pageSize.value)
  if(result.code){
    posListTable.value = result.data.rows
    total.value = result.data.total
  }else{
    ElMessage.error(result.msg)
  }
}
// 禁用职位
const disablePos = async (id) => {
  ElMessageBox.prompt('请输入禁用的原因', '确定要禁用该职位吗？', {
    confirmButtonText: '确定',
    cancelButtonText: 'Cancel',
    inputPattern: /^.{2,}$/, // 至少 2 个字符
    inputErrorMessage: '请输入不通过的原因',
  }).then(async ({ value }) => {
    const result = await noPassReviewApi(id, value)
    if(result.code){
      ElMessage.success(`已阻止发布该职位，原因：${value}`)
      onSubmit()
    }else{
      ElMessage.error(result.msg)
    }
  }).catch(() => {})
}
// 职位表格数据
const posListTable = ref([
  {
    id: 1,
    title: 'Java开发',
    salaryRange: '10k-20k',
    experienceRequired: '1-3年',
    educationRequired: '本科',
    positionType: '全职',
    status: 2,
    publishDate: '2021-01-01',
    updateTime: '2021-01-01 T 10:00:00',
  }
])
//分页
const total = ref(20)
const currentPage = ref(1)
const pageSize = ref(10)
const background = ref(true)
//每页大小改变时触发
const handleSizeChange = (val) => {
  pageSize.value = val
  currentPage.value = 1
  onSubmit()
}
//当前页码改变时触发
const handleCurrentChange = (val) => {
  currentPage.value = val
  onSubmit()
}

//职位详情dialog
const detailVisible = ref(false)
const positionDetail = ref({
  companyName: '上海XXX科技有限公司',
  title: '发生士大夫士大夫',
  salaryRange: '2k-3k',
  workLocation: '手动阀手动阀手动阀阿嘎尔啊',
  experienceRequired: '手动阀手动阀手动阀阿嘎尔啊',
  educationRequired: '手动阀手动阀手动阀阿嘎尔啊',
  positionType: '萨法',
  createTime: '2022-05-05T09:05:05',
  description: '手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊',
  requirements: '...'
})
//通职位id查询职位详情
const queryByPosId = async (id) => {
  detailVisible.value = true
  const result = await getPosByIdApi(id)
  if(result.code){
    positionDetail.value = result.data
  }else{
    ElMessage.error(result.msg)
  }
}
</script>

<template> 
<h2>职位列表</h2>
<!-- 查询条件 -->
<div class="container">
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
  <el-form-item label="职位" style="width: 260px">
    <el-input v-model="formInline.title" placeholder="输入您要查询的职位名称" />
  </el-form-item>
  <el-form-item label="类型">
    <el-select
      v-model="formInline.positionType"
      placeholder="选择职位类型"
      style="width: 190px"
    >
      <el-option label="全职" value="全职" />
      <el-option label="实习" value="实习" />
      <el-option label="兼职" value="兼职" />
    </el-select>
  </el-form-item>
  <el-form-item label="发布时间">
    <el-date-picker
      v-model="formInline.publishDate"
      type="date"
      placeholder="选择发布时间" 
      style="width: 240px"
      value-format="YYYY/MM/DD"
    />
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">查询</el-button>
  </el-form-item>        
  <el-form-item>
    <el-button type="info" @click="clear">清空</el-button>
  </el-form-item>
</el-form>
</div>
<!-- 职位表格数据 -->
<div class="container">
  <el-table :data="posListTable" border style="width: 100%; height: 460px;">
    <el-table-column prop="title" label="职位名称" width="130"  align="center"/>
    <el-table-column prop="salaryRange" label="薪资范围" width="130"  align="center"/>
    <el-table-column prop="experienceRequired" label="经验要求" width="130"  align="center"/>
    <el-table-column prop="educationRequired" label="学历要求" width="130"  align="center"/>
    <el-table-column label="职位类型" width="120" align="center" >
      <template #default="scope">
        <span v-if="scope.row.positionType == `全职`">全职</span>
        <span v-else-if="scope.row.positionType == `兼职`">兼职</span>
        <span v-else-if="scope.row.positionType == `实习`">实习</span>
        <span v-else>其他</span>
      </template>
    </el-table-column>
    <el-table-column label="职位状态" width="120" align="center" >
      <template #default="scope">
        <span v-if="scope.row.status == 1">待审核</span>
        <span v-else-if="scope.row.status == 2">已发布</span>
        <span v-else-if="scope.row.status == 3">审核不通过</span>
        <span v-else>其他</span>
      </template>
    </el-table-column>
    <el-table-column prop="publishDate" label="发布日期" width="160"  align="center"/>
    <el-table-column prop="updateTime" label="最后操作时间" width="180"  align="center"/>
    <el-table-column label="操作" align="center">
      <!-- 如果职位状态为2已发布fashi'，则显示禁用职位按钮；否则点击禁用职位按钮失效 -->
      <template #default="scope">
        <el-button type="info" plain size="small" @click="queryByPosId(scope.row.id)">查看</el-button>
        <el-button type="danger" plain size="small" @click="disablePos(scope.row.id)" :disabled="scope.row.status != 2">禁用职位</el-button>
      </template>
    </el-table-column>
  </el-table>
</div>
<div class="container"> 
  <!-- 简洁版职位详情Dialog -->
  <el-dialog
    v-model="detailVisible"
    title="职位详情"
    width="600px"
  >
    <el-descriptions :column="1" border>
      <el-descriptions-item label="企业名称">
        {{ positionDetail.companyName }}
      </el-descriptions-item>
      <el-descriptions-item label="职位名称">
        {{ positionDetail.title }}
      </el-descriptions-item>
      <el-descriptions-item label="薪资范围">
        {{ positionDetail.salaryRange }}
      </el-descriptions-item>
      <el-descriptions-item label="工作地点">
        {{ positionDetail.workLocation || '未填写' }}
      </el-descriptions-item>
      <el-descriptions-item label="经验要求">
        {{ positionDetail.experienceRequired }}
      </el-descriptions-item>
      <el-descriptions-item label="学历要求">
        {{ positionDetail.educationRequired }}
      </el-descriptions-item>
      <el-descriptions-item label="职位类型">
        {{ positionDetail.positionType }}
      </el-descriptions-item>
      <el-descriptions-item label="提交时间">
        {{ positionDetail.createTime }}
      </el-descriptions-item>
    </el-descriptions>

    <div class="detail-block">
      <h4>职位描述</h4>
      <div class="content-box">{{ positionDetail.description || '无' }}</div>
    </div>

    <div class="detail-block">
      <h4>职位要求</h4>
      <div class="content-box">{{ positionDetail.requirements || '无' }}</div>
    </div>

    <template #footer>
      <el-button @click="detailVisible = false">关闭</el-button>
    </template>
  </el-dialog>
</div>
<!-- 分页 -->
<div class="container">
  <el-pagination
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :page-sizes="[10, 15, 30]"
    :size="size"
    :background="background"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</div>
</template>

<style scoped>
  .container {
    margin-top: 20px;
  }
  
.detail-block {
  margin-top: 20px;
}

.detail-block h4 {
  margin-bottom: 8px;
  color: var(--el-text-color-primary);
}

.content-box {
  padding: 12px;
  border: 1px solid var(--el-border-color-light);
  border-radius: 4px;
  background-color: var(--el-fill-color-lighter);
  min-height: 60px;
}
</style>